<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>组管理</title>
    <script src="http://localhost:10000/js/jquery-1.11.3.min.js"></script>
</head>
<body>
<table >
    <tr>
        <td>系统管理 >> 用户管理</td>
    </tr>
    <tr>
        <td>
            查询
        </td>
    </tr>
</table>
<form action="Group.do">
    <table border="1" width=90% solid #505ca0>
        <tr><!--4行，11列 -->
            <td>
                用户组id
            </td>
            <td colspan="10">
                <input type="text" id="groupID" name="groupID" th:value="${session.groupID}" />
            </td>
        </tr>
        <tr>
            <td>
                用户组名称
            </td>
            <td colspan="10">
                <input type="text" id="groupName" name="groupName" th:value="${session.groupName}"/>
            </td>
        </tr>
        <tr>
            <td><input type="hidden" th:value="${session.pageInfo.getPageNum()}" id="pageNum"></td>
            <td colspan="11"><input type="submit" value="查询"></td></tr>
    </table>
    每页显示条数<select name="pageSize" id="pageSize"  onchange="lastpage1(this.value)">
    <option th:selected="${session.pageInfo.pageSize==15}">15</option>
    <option th:selected="${session.pageInfo.pageSize==10}">10</option>
    <option th:selected="${session.pageInfo.pageSize==5}">5</option>
</select>
</form>

<table>
    <tr><td height="50px"></td></tr>
</table>

<label th:if="${session.pageInfo.size==0}" style="color: #ff4400">
    没有查到任何数据!请核对查询信息
</label>

<table border="1" width=90% th:if="${session.pageInfo.size!=0}">
    <tr>
        <td></td><td>用户组ID</td><td>组名称</td><td>编辑时间</td>
    </tr>
    <tr th:each="everyCus:${session.pageInfo.getList()}" id="tr1">
        <td><input type="radio" name="a" th:value="${everyCus.groupID}" onclick="select1(this.value)"></td>
        <td th:text="${everyCus.groupID}" ></td>
        <td th:text="${everyCus.groupName}" ></td>
        <td th:text="${everyCus.groupEditTime}"></td>
    </tr>
    <tr>
        <button th:value="${session.pageInfo.getPageNum()>1?session.pageInfo.getPageNum()-1:session.pageInfo.getPageNum()}" onclick="lastpage(this.value)">上一页</button>
        <button th:value="${session.pageInfo.getPageNum()<session.pageInfo.getPages()?session.pageInfo.getPageNum()+1:session.pageInfo.getPageNum()}" onclick="lastpage(this.value)">下一页</button>
    </tr>
</table>



<table>
    <tr><td height="50px">用户信息</td></tr>
</table>

<form>
    <table border="1" width=90% ><!-- 11行11列-->
        <tr>
            <td>
                用户组名称
            </td>
            <td colspan="10">
                <input type="text" name="groupName" id="groupName1"/>
            </td>
        </tr>


        <tr>
            <td>
                备注
            </td>
            <td colspan="10">
                <textarea name="groupNote" cols="30" rows="3" id="groupNote"></textarea>
            </td>
        </tr>

        <tr>
            <td>
                编辑时间
            </td>
            <td colspan="10">
                <input type="text" name="groupEditTime" id="groupEditTime"/>
            </td>
        </tr>

        <tr>
            <td>
                状态
            </td>
            <td colspan="10">
                <input id="state" type="radio" name="state" readonly="readonly"/>删除
                <input type="radio" name="state" readonly="readonly" checked="checked" />活动
            </td>
        </tr>

    </table>
</form>
</body>

<script type="text/javascript">
    //上一页和下一页  86,96
    function lastpage(page) {
        var groupName = $("#groupName").val();
        var groupID = $("#groupID").val();
        var pageSize = $("#pageSize").val();
        window.location = "Group.do?pageNum="+page+"&pageSize="+pageSize+"&groupName="+groupName+"&groupID="+groupID;
    }
    //每页查询
    function lastpage1(page) {
        var groupName = $("#groupName").val();
        var groupID = $("#groupID").val();
        var pageNum = $("#pageNum").val();
        window.location = "Group.do?pageNum="+pageNum+"&pageSize="+page+"&groupName="+groupName+"&groupID="+groupID;
    }

    //选择修改的客户信息，将查询到的值返回到客户信息列表
    function select1(groupID) {
        $.ajax({
            url:"Group1.do",
            data:"groupID="+groupID,
            dataType:"json",
            success:function (data) {
                console.log(JSON.stringify(data)) ;
                for (var i = 0; i < data.length; i++){
                    $("#groupName1").attr("value",data[i].groupName);
                    document.getElementById("groupNote").value=data[i].groupNote;
                    $("#groupEditTime").attr("value",data[i].groupEditTime);
                }
            }
        })
    }
</script>
</html>